<template>
	<view class="test-home">
		<view class="home-top">
			<text class="t-title">MBTI性格类型测试问卷</text>
			<view class="home-btn">
				<text class="btn-text">世界级权威测试</text>
			</view>
			<text class="que-num">基础题{{basicNum}}道 · 描述题{{describeNum}}道</text>
		</view>
		<view class="home-center">
			<text class="c-title">试试看你的性格，适合什么样的工作？</text>
			<view class="c-title2">
				<image src="/static/mbti/title1.png" mode="aspectFill"></image>
				<text>应用领域</text>
				<image src="/static/mbti/title2.png" mode="aspectFill"></image>
			</view>
			<view class="field">
				<view class="">
					<view class="field-item"><text class="field-spot"></text>自我了解和发展</view>
					<view class="field-item"><text></text>管理和领导能力培训</view>
				</view>
				<view class="">
					<view class="field-item"><text></text>职业发展和规划</view>
					<view class="field-item"><text></text>解决问题能力</view>
				</view>
				
			</view>
			<view class="c-start-btn">
				<text class="start-btn" @click="startTest">马上试试</text>
			</view>
		</view>
		<view class="test-desc">
			<view class="title2">
				<text>测试说明</text>
			</view>
			<view class="desc-content">
				<view>
					<text class="black">MBTI (Myers-Briggs Type Indicator)</text>，是一份性格自测问卷。它由美国的心理学家Katherine Cook Briggs (1875-1968) 和她的心理学家女儿Isabel Briggs Myers根据瑞士著名的心理分析学家Carl G. Jung (荣格)的心理类型理论和她们对于人类性格差异的长期观察和研究而著成。经过了长达50多年的研究和发展，MBTI已经成为了当今全球<text class="black">最为著名和权威</text>的性格测试。
				</view>
				<view class="title3">· MBTI测试前须知 ·</view>
				<view class="">
					1、参加测试的人员请务必诚实、独立地回答<text class="black">诚实、独立</text>地回答问题，只有如此，才能得到有效的结果。
				</view>
				<view class="">
					2、《性格分析报告》展示的是你的<text class="black">性格倾向</text>，而不是你的知识、技能、经验。 
				
				</view>
				<view >
					3、MBTI提供的性格类型描述仅供测试者确定自己的性格类型之用，<text class="black">性格类型没有好坏</text>，只有不同。每一种性格特征都有其价值和优点，也有缺点和需要注意的地方。清楚地了解自己的性格优劣势，有利于更好地发挥自己的特长，而尽可能的在为人处事中避免自己性格中的劣势，更好地和他人相处，更好地作重要的决策。 
				</view>
				<view>
					4、本测试分为四部分，共<text class="black">93题</text>；需时约18分钟。所有题目没有对错之分，请根据自己的实际情况选择。只要你是认真、真实地填写了测试问卷，那么通常情况下你都能得到一个确实和你的性格相匹配的类型。希望你能从中或多或少地获得一些有益的信息。
				</view>
				<view class="tips">
					<text>注：每答完部分题型，可获得相应的积分。</text>
				</view>
			</view>
		</view>
		<view class="test-eval">
			<view class="title2">
				<text>学生评价</text>
			</view>
			<view class="title4"><text>· 已有{{totalRowCom}}人参与测试</text></view>
			<view class="eval-list">
				<view class="eval-item" v-for="(item, i) in commentList" :key="i">
					<view class="eva-info" :class="{'eva-info-flip': i%2==1}">
						<view class="head-name">
							<view class="head">
								<image :src="headHandle(item)" mode="aspectFill"></image>
								<image class="sex" :src="`/static/mbti/sex${item.sex||1}.png`" mode="aspectFill"></image>
							</view>
							<view class="name">
								<view style="font-weight: 600;color: #10141A;">{{item.name}}</view>
								<text style="font-size: 24rpx;">{{item.type}} · {{item.personalityName}}</text>
							</view>
						</view>
						<view class="eva-logo">
							<image :src="`/static/mbti/${item.type}.png`" mode="aspectFill"></image>
						</view>
					</view>
					<view class="eva-content">
						<image src="/static/mbti/yh1.png" mode="aspectFill"></image>
						<view class="content" style="margin: 0 18rpx 0 28rpx;">
							<text>{{item.content}}</text>
						</view>
						<image class="yh-right" src="/static/mbti/yh.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="text-now">
			<view class="text-now-box">
				<text class="text-now-btn" @click="startTest">立即测试</text>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			basicNum: 0,
			describeNum: 0,
			commentList: [],
			totalRowCom: 0
		}   
	},
	onLoad() {
		this.getfindQuestion()
		this.getfindMbtiComments()
	},
	methods: {
		headHandle(info){
			// 处理头像显示
			info.avatarUrl = info.pic
			return this.utils.headImage(info)
		},
		getfindMbtiComments(){
			this.api.get('mbti/findMbtiComments', {
				page: 1,
				limit: 20
			}).then(res=>{
				if(res.data.state !='ok')return
				let comments = res.data.comments;
				this.commentList = comments.list;
			})
		},
		getfindQuestion(){
			this.api.get('mbti/findQuestionNum').then(res=>{
				if(res.data.state !='ok')return
				this.describeNum = res.data.describeNum
				this.basicNum = res.data.basicNum
				this.totalRowCom = res.data.num
			})
		},
		startTest(){
			uni.navigateTo({
				url: "/pages/MBTI/test-question"
			})
		}
	}
}
</script>
<style lang="less" scoped>
	.home-top{
		height: 471rpx;
		padding-top: 70rpx;
		background-image: url(~@/static/mbti/ent-bg.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: 0;
		box-sizing: border-box;
		text-align: center;
	}
	.t-title{
		color: #22242A;
		font-size: 36rpx;
		line-height: 56rpx;
	}
	.home-btn{
		margin-top: 22rpx;
	}
	.btn-text{
		display: inline-block;
		width: 210rpx;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 25rpx;
		background: linear-gradient(45deg, #FFC8A0, #FF9767);
		color: #fff;
		font-size: 24rpx;
	}
	.que-num{
		display: block;
		margin-top: 10rpx;
		line-height: 30rpx;
		font-size: 22rpx;
		color: #262E3F;
	}
	
	.home-center{
		margin: -197rpx 32rpx 0;
		padding: 54rpx 0 ;
		background-color: #fff;
		border-radius: 32rpx;
		text-align: center;
		box-shadow: 0 0 21rpx 0 rgba(235, 235, 235, .5);
	}
	.c-title{
		line-height: 48rpx;
		font-size: 30rpx;
		color: #333;
	}
	.c-title2{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 24rpx;
		image{
			width: 34rpx;
			height: 10rpx;
		}
		text{
			margin: 0 14rpx;
			color: #999;
			font-size: 24rpx;
		}
	}
	.field{
		margin-top: 36rpx;
		color: #666666;
		font-size: 22rpx;
		display: flex;
		justify-content: space-evenly;
	}
	.field-item{
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		text{
			width: 16rpx;
			height: 16rpx;
			margin-right: 10rpx;
			border-radius: 8rpx;
			border: 2rpx solid #979797;
			transform: scale(0.5);
			box-sizing: border-box;
		}
	}
	.c-start-btn{
		margin-top: 54rpx;
		
	}
	.start-btn{
		display: inline-block;
		width: 320rpx;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 20rpx;
		background-color: #28C2CD;
		color: #fff;
		font-size: 32rpx;
		font-weight: 600;
	}
	.test-desc{
		margin-top: 80rpx;
	}
	.title2{
		text-align: center;
		
		
		text{
			position: relative;
			font-size: 30rpx;
			color: #555;
			font-weight: bold;
			&::after{
				position: absolute;
				content: '';
				left: -13rpx;
				right: -13rpx;
				bottom: 0;
				height: 8rpx;
				border-radius: 2rpx;
				background-color: #28C2CD;
				opacity: .39;
				
			}
		}
	}
	
	.desc-content{
		margin: 40rpx 32rpx 0;
		padding: 36rpx 32rpx;
		background-image: url(~@/static/mbti/bg.png);
		background-size: cover;
		background-position: 0;
		color: #999;
		line-height: 42rpx;
		font-size: 26rpx;
		.black{
			color: #262E3F;
		}
		.tips{
			margin-top: 50rpx;
			color: #FF9767;
		}
	}
	.title3{
		text-align: center;
		margin: 50rpx auto 32rpx;
		font-weight: 600;
		font-size: 24rpx;
		color: #262E3F;
	}
	
	.test-eval{
		margin-top: 61rpx;
	}
	.title4{
		margin-left: 32rpx;
		margin-top: 40rpx;
		font-size: 22rpx;
		color: #666666;
	}
	.eval-list{
		margin-top: 24rpx;
		padding: 0 32rpx;
	}
	.eval-item{
		margin-bottom: 40rpx;
		background-color: #fff;
		box-shadow: 0 0 21rpx 0 rgba(235, 235, 235, .5);
		border-radius: 32rpx;
		padding: 32rpx;
		box-sizing: border-box;
	}
	.eva-info{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.head{
			width: 88rpx;
			height: 88rpx;
			background-color: #fff;
			padding: 4rpx;
			border-radius: 44rpx;
			box-shadow: 0 8rpx 8rpx 0 rgba(21, 26, 33, .1);
			box-sizing: border-box;
			position: relative;
			image{
				width: 100%;
				height: 100%;
				border-radius: 44rpx;
			}
			.sex{
				position: absolute;
				bottom: 0%;
				right: 0;
				width: 28rpx;
				height: 28rpx;
				border-radius: 0;
			}
		}
		.name{
			margin-left: 18rpx;
			color: #8E9199;
			
			
		}
		.result{
			font-size: 24rpx;
			margin-top: 7rpx;
			color: #8E9199;
		}
		
	}
	.head-name{
		display: flex;
		align-items: center;
	}
	
	.eva-info-flip{
		.head-name, .head{
			order: 1;
		}
		.name{
			text-align: right;
			margin-right: 18rpx;
		}
	}
	
	.eva-logo{
		image{
			width: 96rpx;
			height: 72rpx;
		}
	}
	.eva-content{
		margin-top: 30rpx;
		padding-top: 24rpx;
		display: flex;
		image{
			width: 28rpx;
			height: 22rpx;
		}
		.content{
			width: 86%;
			position: relative;
			
			&::after{
				position: absolute;
				left: 0;
				top: -24rpx;
				content: '';
				width: 200%;
				height: 2rpx;
				background-color: #D7D8DB;
				transform: scale(0.5) translateX(-50%);
			}
		}
		text{
			color: #999999;
			font-size: 26rpx;
			line-height: 42rpx;
		}
		.yh-right{
			align-self: flex-end;
		}
	}
	
	.text-now{
		margin-top: 51rpx;
		height: 142rpx;
		
	}
	.text-now-box{
		position: fixed;
		height: 142rpx;
		background-color: #fff;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		/* #ifndef H5 */
		left: 0;
		right: 0;
		/* #endif */
		bottom: 0;
	}
	.text-now-btn{
		display: block;
		margin: 24rpx 32rpx;
		height: 94rpx;
		line-height: 94rpx;
		background-color: #28C2CD;
		border-radius: 20rpx;
		text-align: center;
		color: #fff;
		font-size: 32rpx;
	}
</style>